<template>
    <div class="loginPage">
        <div>
            <h1 class="web-name">Sam9029 File Web</h1>
            <van-form validate-first @failed="onFailed">
              <!-- 通过 pattern 进行正则校验 -->
              <van-field
                label="用户名"
                placeholder="用户名"
                v-model="value1"
                name="pattern"
                
                :rules="[{ pattern, message: '请输入用户名' }]"
              />
              <!-- 通过 validator 进行函数校验 -->
              <van-field
                label="密码"
                type="password"
                placeholder="密码"
                v-model="value2"
                name="validator"
                
                :rules="[{ validator, message: '请输入密码' }]"
              />
              <!-- 通过 validator 进行异步函数校验 -->
              <van-field
                label="验证码"
                placeholder="验证码"
                v-model="value3"
                name="asyncValidator"
                
                :rules="[{ validator: asyncValidator, message: '请输入验证码' }]"
              />
              <div class="cpatchaImgBox" style="margin: 16px;" @click="reCpatcha">
                <img class="cpatchaImg" src="../assets/logo1.jpeg" alt="">
                <van-icon name="replay" size='30px' class="cpatchaRe" />
              </div>
              <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">登录</van-button>
              </div>
            </van-form>
        </div>
    </div>
</template>

<script>
// import 'vant/lib/index.css'
import { Toast } from 'vant';
export default {
  data() {
    return {
        cpatchaImgUrl:'../assets/logo1.jpeg',
        value1: '',
        value2: '',
        value3: '',
        pattern: /\d{3}/,
    };
  },
  mounted(){
    this.$store.commit('show')
  },
  methods: {
    // 校验函数返回 true 表示校验通过，false 表示不通过
    validator(val) {
      return /1\d{6}/.test(val);
    },
    // 异步校验函数返回 Promise
    asyncValidator(val) {
      return new Promise((resolve) => {
        Toast.loading('验证中...');

        setTimeout(() => {
          Toast.clear();
          resolve(/\d{6}/.test(val));
        }, 1000);
      });
    },
    onFailed(errorInfo) {
      console.log('failed', errorInfo);
    },
    reCpatcha(){
        Toast.loading('刷新验证码');        
    }
  },
};
</script>

<style lang="scss" scoped>
    .loginPage{
        width:100%;
        height:calc(100vh - 3.2778rem);
        display:flex;
        justify-content: center;
        align-items:center;

        .web-name{
            text-align:center;
            padding-bottom:20px;
        }


        .cpatchaImgBox{
            display:flex;
            justify-content: center;
            align-items:center;
            width: 100%;
            .cpatchaImg{
                flex:2;
                object-fit:cover;
                width: auto;
                height: 50px;
            }
            .cpatchaRe{}
        }
    }

</style>